<template>
	<section>
		<!--高级查询-->
		<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
			<el-form :inline="true" :model="searchShop" >
				<el-form-item label="商家名">
					<el-input v-model="searchShop.name"  placeholder="商家名"></el-input>
				</el-form-item>
				<el-form-item label="地址">
					<el-input v-model="searchShop.address"  placeholder="地址"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" v-on:click="getShop">查询</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="handleAdd">新增</el-button>
				</el-form-item>
			</el-form>
		</el-col>
		<!--表格-->
		<el-table :data="Shop" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;">
			<!--最前面的选择框-->
			<el-table-column type="selection">
			</el-table-column>
			<!--行号-->
			<el-table-column type="index" label="序号" width="80px" align="center">
			</el-table-column>
			<el-table-column prop="name" label="商家名称" sortable align="center">
			</el-table-column>
			<el-table-column prop="tel" label="电话号码" sortable align="center">
			</el-table-column>

			<el-table-column prop="registerTime" label="注册时间" sortable align="center" value-format="yyyy-MM-dd hh:mm:ss">
			</el-table-column>
			<el-table-column prop="state" label="状态" sortable align="center" :formatter="StateFormatter">
			</el-table-column>
			<el-table-column prop="address" label="地址" sortable align="center">
			</el-table-column>
			<!--<el-table-column prop="logo" label="logo" sortable align="center">
			</el-table-column>-->
			<el-table-column prop="employeeName.username" label="用户名" sortable align="center">
			</el-table-column>
			<el-table-column label="操作" width="150" align="center">
				<template scope="scope">
					<el-button size="small" @click="handleAudit(scope.$index, scope.row)">审核</el-button>
					<el-button type="danger" size="small" @click="DisableAudit(scope.$index, scope.row)">禁用</el-button>
				</template>
			</el-table-column>
		</el-table>
		<!--工具条-->
		<el-col :span="24" class="toolbar">
			<el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button>
			<el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="pageSize" :total="total" style="float:right;">
			</el-pagination>
		</el-col>

		<!--审核弹出框-->
		<el-dialog
				title="审核商家信息"
				:visible.sync="centerDialogVisible"
				width="30%"
				center>
			<el-form ref="form" :model="form" label-width="80px" class="demo-ruleForm">
				<el-form-item label="审核信息" prop="audit" >
					<el-input v-model="form.audit"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
					<el-button @click="centerDialogVisible = false">取 消</el-button>
					<el-button type="primary" @click="AuditPass">审核通过</el-button>
					<el-button type="primary" @click="AuditNoPass">审核不通过</el-button>
  			</span>
		</el-dialog>


	</section>
</template>

<script>
	import ShopRes from "../ShopRes";

	export default {
		data() {
			return {
				//列表前勾选框
				sels:[],
				//商家信息列表数据
				Shop:[],
				//加载动作默认false
				listLoading: false,
				//默认页码1
				currentPage:1,
				//每页显示条数默认10
				pageSize:10,
				//总条数默认0
				total:0,
				//添加编辑对话框默认关闭
				dialogVisible: false,
				//高级查询表单信息
				searchShop:{
					//商店名
					name: "",
					//地址
					address:""
				},
				//审核信息弹出框默认关闭
				centerDialogVisible: false,
				//审核弹出框，审核信息
				form:{
					//审核信息输入框
					audit: ""
				}
			}
		},
		//方法
		methods:{
			//审核通过
			AuditPass(){
				//通过vue   session  传递id进行获取
				let id = this.ShopId = sessionStorage.getItem("ShopId");
				//发送分页查询请求
				this.$http.post("/shop/pass/"+id).then((res => {
					if (res.data.success){
						this.$message.success("操作成功");
						//关闭审核框
						this.centerDialogVisible = false;
						//刷新
						this.loadAllShop();
					}else {
						//删除失败提示友好信息
						this.$message.error(res.data.msg);
					}
				}));
			},
			//审核不通过
			AuditNoPass(row){
				//通过vue   session  传递id进行获取
				let id = this.ShopId = sessionStorage.getItem("ShopId");
				//发送分页查询请求
				this.$http.post("/shop/noPass/"+id).then((res => {
					if (res.data.success){
						this.$message.success("操作成功");

						//关闭审核框
						this.centerDialogVisible = false;
						//刷新
						this.loadAllShop();
					}else {
						//删除失败提示友好信息
						this.$message.error(res.data.msg);
					}

				}));
			},
			//状态格式调整
			StateFormatter(row,column){
				/**店铺状态   0 待审核  1  审核通过   -1 审核不通过 2 禁用*/
				if (row.state ==0){
					return "待审核";
				}else if(row.state ==1){
					return "审核通过";
				}else if(row.state == -1){
					return "审核不通过";
				}else {
					return "禁用";
				}
			},
			//新增
			handleAdd(){
				//跳转到商家入驻界面
				this.$router.push({ path: '/shopRes' });
			},
			//查询
			getShop(){
				//查询
				this.loadAllShop();
			},
			//列表前面的勾选框
			selsChange(sels){
				this.sels = sels;
			},
			//审核
			handleAudit(index,row){
				//打开审核框
				this.centerDialogVisible = true;
				//获取id
				let id = row.id;
				//vue session 存值
				sessionStorage.setItem("ShopId", id);

			},
			//禁用
			DisableAudit(index,row){
				/*点击删除弹出提示框*/
				this.$confirm('此操作将永久禁用该用户, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					//获取id
					let id = row.id;
					this.$http.post("/shop/"+id).then((res => {
						if (res.data.success){
							this.$message({
								type: 'success',
								message: '禁用成功!'
							});
							//调用方法
							this.loadAllShop();
						}else {
							//删除失败提示友好信息
							this.$message.error(res.data.msg);
						}
					}));

				}).catch(() => {
					//取消删除不给任何提示
				});

			},
			//批量删除
			batchRemove(){
				/*点击批量删除弹出提示框*/
				this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					//获取到批量删除的id传递一个数组  /del  匹配批量删除
					let ids = this.sels.map(item => item.id);
					this.$http.patch("/shop/del",ids).then((res => {
						if (res.data.success){
							this.$message({
								type: 'success',
								message: '删除成功!'
							});
							this.searchEmployee={
								username: "",
								email: "",
								state: ""
							}
							//调用方法
							this.loadAllShop();
						}else {
							//删除失败提示友好信息
							this.$message.error(res.data.msg);
						}
					}));

				}).catch(() => {
					//取消删除不给任何提示
				});



			},
			//页面页码改变
			handleCurrentChange(row){
				//给页码赋值
				this.currentPage = row;
				//重新加载请求
				this.loadAllShop();
			},
			//查询所有商家信息
			loadAllShop(){
				//打开加载动作
				this.listLoading = true;
				//设置json格式参数
				let param = {
					"currentPage":this.currentPage, "pageSize": this.pageSize,
					"name":this.searchShop.name,"address":this.searchShop.address
				}
				//发送分页查询请求
				this.$http.patch("/shop",param).then((res => {
					console.debug("==================================",res)
					//给商家表格设置值
					this.Shop = res.data.result;
					//总条数
					this.total = res.data.total;
				}));
				//打开加载动作
				this.listLoading = false;
			}
		},
		//页面加载的时候执行
		mounted() {
			//加载页面信息
			this.loadAllShop();
		}
	}

</script>